<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">订单编号：</label>
                            <div class="col-sm-10">
                                <input id="orderId" name="orderId" class="form-control" type="text" maxlength="60" placeholder=""  th:value="${order.orderId}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">下单人姓名：</label>
                            <div class="col-sm-10">
                                <input id="nickName" name="nickName"
                                       class="form-control" type="text"  maxlength="20" th:value="${nickName}" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">订单创建时间：</label>
                            <div class="col-sm-10">
                                <input id="createTime" name="createTime"
                                       class="form-control" type="text"  maxlength="20" th:value="${createTime}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">订单总金额：</label>
                            <div class="col-sm-10">
                                <input id="totalAmt" name="totalAmt"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.totalAmt}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">支付金额：</label>
                            <div class="col-sm-10">
                                <input id="payAmt" name="payAmt"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.payAmt}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">快递费用：</label>
                            <div class="col-sm-10">
                                <input id="shipFee" name="shipFee"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.shipFee}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货人姓名：</label>
                            <div class="col-sm-10">
                                <input id="receiveName" name="receiveName"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.receiveName}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货人电话：</label>
                            <div class="col-sm-10">
                                <input id="receiveTel" name="receiveTel"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.receiveTel}" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货地址：</label>
                            <div class="col-sm-10">
                                <input id=" dtlAddr" name="dtlAddr"
                                       class="form-control" type="text"  maxlength="20" th:value="${order.dtlAddr}" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">买家留言：</label>
                            <div class="col-sm-10">
                                <textarea id="remark" name="remark"  th:text="${order.remark}"
                                          class="form-control" placeholder="买家留言..."  style="height: 100px"  disabled></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="orderStatus" value="0"   th:field="*{order.orderStatus}" disabled/>待付款
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderStatus" value="1"   th:field="*{order.orderStatus}" disabled/>已付款
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderStatus" value="2"   th:field="*{order.orderStatus}" disabled/>已发货
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderStatus" value="3"   th:field="*{order.orderStatus}" disabled/>已完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="orderStatus" value="9"   th:field="*{order.orderStatus}" disabled/>已取消
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否有售后:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="isAfterSale" value="0"   th:field="*{order.isAfterSale}" disabled/>否
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="isAfterSale" value="1"   th:field="*{order.isAfterSale}" disabled/>是
                                </label>
                            </div>
                        </div>


                        <div class="form-group">
                        <label class="col-sm-2 control-label">商品列表：</label>
                            <div class="col-sm-10">
                                <table id="exampleTable" data-mobile-responsive="true">
                                </table>
                            </div>
                        </div>

                       <!-- 下拉列表-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">快递公司：</label>
                            <div class="col-sm-10">
                                <select name="shipCompanyId" id="shipCompanyId" >
                                    <option value="">--快递公司--</option>
                                    <option th:each="appinfo,userStat:${shipCfgs}" th:value="${appinfo.shipId}" th:text="${appinfo.shipName}" th:selected="${appinfo.shipId == order.shipCompanyId}"></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">快递单号：</label>
                            <div class="col-sm-10">
                                <input id="shipTraceNo" name="shipTraceNo"
                                       class="form-control" type="text"  maxlength="60" th:value="${order.shipTraceNo}" >
                            </div>
                        </div>

                        <input id="orderStatus" name="orderStatus"
                               class="form-control" type="hidden" id="orderStatus"  maxlength="20" th:value="${order.orderStatus}" readonly>
                        <div class="text-right form-group">
                            <button id="aut" type="submit" class="btn btn-primary"  style="display: none">发货</button>
                        </div>

                    </form>
                    <div class="text-right form-group">
                        <button  id="utt" class="btn btn-primary"  onclick="ship()" style="display: none">查询</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript">
    $(function () {
        load();
    });


    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method: 'get', // 服务器数据的请求方式 get or post
                    url: '/app/order/productList', // 服务器数据的加载地址
                    //showRefresh: true,
                    //	showToggle : true,
                    //	showColumns : true,
                    iconSize: 'outline',
                    toolbar: '#exampleToolbar',
                    striped: true, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: false, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect: false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    //search : true, // 是否显示搜索框
                    showColumns: false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParams: function () {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit: this.limit,
                            offset: this.offset,
                            orderId: $('#orderId').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns: [
                        {
                            field: 'productId',
                            title: '商品编号'
                        },
                        {
                            field: 'productName',
                            title: '商品名称'
                        },
                        {
                            field: 'colorName',
                            title: '颜色'
                        },
                        {
                            field: 'specsName',
                            title: '规格'
                        },
                        {
                            field: 'price',
                            title: '价格'
                        },
                        {
                            field: 'buyNums',
                            title: '商品购买数量'
                        },
                        {
                            field: 'returnOrderStatus',
                            title: '退款状态',
                            formatter: function (value, row, index) {
                                if (row.returnType == null) {
                                    return '<span class="label label-primary">暂无</span>';
                                }else if (row.returnType == '1') { // 换货
                                    if (value == '0') {
                                        return '<span class="label label-danger">换货中</span>';
                                    } else if (value == '1') {
                                        return '<span class="label label-primary">换货审核通过</span>';
                                    }else if (value == '2') {
                                        return '<span class="label label-primary">换货驳回</span>';
                                    }else if (value == '3') {
                                        return '<span class="label label-danger">用户撤销</span>';
                                    }else if (value == '4') {
                                        return '<span class="label label-primary">用户已换货</span>';
                                    }else if (value == '5') {
                                        return '<span class="label label-primary">换货已发货</span>';
                                    }else if (value == '6') {
                                        return '<span class="label label-primary">换货完成</span>';
                                    }else if (value == '9') {
                                        return '<span class="label label-primary">未售后</span>';
                                    }
                                }else if (row.returnType == '2') {
                                    if (value == '0') {
                                        return '<span class="label label-danger">退款中</span>';
                                    } else if (value == '1') {
                                        return '<span class="label label-primary">换货审核通过</span>';
                                    }else if (value == '2') {
                                        return '<span class="label label-danger">退款失败</span>';
                                    }else if (value == '3') {
                                        return '<span class="label label-danger">用户撤销</span>';
                                    }else if (value == '4') {
                                        return '<span class="label label-primary">用户已退货</span>';
                                    }else if (value == '5') {
                                        return '<span class="label label-primary">退款完成</span>';
                                    }else if (value == '9') {
                                        return '<span class="label label-primary">未售后</span>';
                                    }
                                }
                            }
                        }
                    ]
                });
    }
    $(function () {
        var a = $("#orderStatus").val();
        if (a==1){
            $("#aut").show()
        }
        if (a>1){
            $("#utt").show()
        }

    });

    $().ready(function () {
        validateRule();
    });

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });


    function ship() {
        var shipTraceNo = $('#shipTraceNo').val();
        layer.open({
            type: 2,
            title: '物流详情',
            maxmin: true,
            shadeClose: false, // 点击遮罩关闭层
            area: ['800px', '500px'],
            content: "/app/order/ship/" + shipTraceNo
        });
    }




    function save() {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/app/order/update",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            success: function (data) {
                layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                shipTraceNo:{
                    required: true
                },
                shipCompanyId:{
                    required: true
                }
            },
            messages: {
                shipTraceNo:{
                    required: icon + "必填",
                },
                shipCompanyId:{
                    required: icon + "必填",
                }
            }
        })
    }
</script>
</body>
</html>